<template>
	<view class="container">
		<view class="pageHead">
			<!-- <image src="../../static/arc.png" class="bgPic" mode=""></image> -->
			<view class="headPicCon">
				<image class="portrait" :src="userDetail?userDetail.userPhoto:'/static/missing-face.png'"></image>
			</view>
			
			<view class="user-wrap">
				<view class="userInfoBox" style="margin-bottom: 10px;">
					<text>余额：{{userDetail.userMoney}}</text>
				</view>
				<view class="userInfoBox" style="margin-bottom: 10px;">
					<text>消费奖励：{{userDetail.gg_credit}}</text>
				</view>
			</view>
			<view class="user-wrap">
				<view class="userInfoBox">
					<text>抵扣金：{{userDetail.pintuan_voucher}}</text>
				</view>
				<view class="userInfoBox">
					<text>冻结积分：{{userDetail.freedMoney}}</text>
				</view>
			</view>
			
			
		</view>
		<view class="balance_tab">
			<view :class="tabindex == 0 ? 'balanceActive ye' : 'ye'" @click="changetab(0)">我的余额</view>
			<view :class="tabindex == 3 ? 'balanceActive ye' : 'ye'" @click="changetab(3)">冻结积分</view>
			<view :class="tabindex == 1 ? 'balanceActive gx' : 'gx'" @click="changetab(1)">我的贡献</view>
			<view :class="tabindex == 2 ? 'balanceActive gx' : 'gx'" @click="changetab(2)">我的抵扣金</view>
		</view>
		<view class="incomeList">
			<block v-if="incomes && incomes.length">
				<view :class="['incomeItem',index!=incomes.length-1?'borderbot':'']" v-for="(item, index) in incomes" :key="index">
					<view class="from">
						<view>{{item.remark}}</view>
						<view>{{item.createTime}}</view>
					</view>
					<view class="incomeAccount">
						<image src="../static/images/Moneybag.png" class="moneyPic" mode=""></image>
						<text v-if="item.money">{{item.money}}</text>
						<text v-if="item.score">{{item.score}}</text>
					</view>
				</view>
			</block>
			<empty v-else emptyText="当前暂无收益"></empty>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				dklist:[],
				defaultlist: [],
				tabindex: 0,
				userDetail: uni.getStorageSync('userDetail'),
				incomes: [],
				ggLogs: [],
				currentPage: 1,
				total: 1,
				moneyFreedLogs: [],
			};
		},
		onLoad(e) {
			this.tabindex = e.type ? e.type : 0;
			this.loadIncomes()
		},
		onReachBottom() {
			// this.currentPage++
			// this.loadIncomes()
		},
		methods: {
			changetab(index) {
				this.tabindex = index;
				if (index == 1) {
					this.incomes = this.ggLogs
				}
				if(index == 0){
					this.incomes = this.defaultlist
				}
				if(index == 2){
					this.incomes = this.dklist;
				}
				if(index == 3){
					this.incomes = this.moneyFreedLogs;
				}
			},
			loadIncomes() {
				let that = this
				// if (that.currentPage > that.total) {
				// 	that.$api.msg('没有更多了！')
				// 	return
				// }
				that.$Request.request('/api/user_center/moneyLogs', 'GET').then(res => {
					if (res.status == 1) {

						that.incomes = res.data.moneyLogs;
						that.ggLogs = res.data.ggLogs
						that.defaultlist = res.data.moneyLogs
						that.dklist  = res.data.pintuanVoucherLogs;
						that.moneyFreedLogs = res.data.moneyFreedLogs;
						this.changetab(this.tabindex)
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance_tab {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		justify-content: center;
		text-align: center;
		font-size: 14px;

		.gx,
		.ye {
			flex: 1;
			padding-bottom: 15px;
		}

		.balanceActive {
			border-bottom: 1px solid #d92b25;
		}
	}

	page,
	.container {
		height: 100%;
		background-color: #F8F8F8;
	}

	.borderbot {
		border-bottom: 1rpx solid $uni-border-color;
	}

	.incomeList {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.4);
		border-radius: 10rpx;
		padding: 20rpx 0 20rpx 26rpx;

		.incomeItem {

			padding: 26rpx 0;
			@extend %flexBetw;
			font-size: $uni-font-size-sm;

			.from {
				padding-left: 0.2em;
				font-size: $uni-font-size-sm;
				display: flex;
				flex-direction: column;
				font-weight: bold;
				color: $themColor;

			}

			.incomeAccount {
				@extend %flexVcenter;
				padding-right: 20rpx;

				.moneyPic {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.timer {
				width: 200rpx;
			}
		}
	}

	.pageHead {
		width: 750rpx;
		height: 320rpx;
		background: linear-gradient(to bottom, #ee5b25, #d92b25);
		position: relative;

		.headPicCon {
			height: 180rpx;
			width: 750rpx;
			@extend %flexAlCenter;

			.portrait {
				width: 130rpx;
				height: 130rpx;
				border: 5rpx solid #fff;
				border-radius: 50%;
			}
		}
		
		.user-wrap {
			width: 100%;
			padding: 0px 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.userInfoBox {
			color: #fff;
			font-size: $uni-font-size-base;
			padding: 0 50rpx;
			@extend %flexAlCenter;
		}

		.bgPic {
			width: 750rpx;
			height: 60rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
